<template>
  <div>
    <!-- ip列表 -->
    <div class="page">
      <a-table
        v-if="tableReset"
        :style="{ width: '100%' }"
        :columns="tableColumns"
        :data-source="userList"
        :pagination="false"
        class="header-right-angle admin-table"
        @change="tableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex == 'createTime'">
            {{ dateFormat(record.createTime) }}
          </template>
          <template v-else-if="column.dataIndex == 'status'">
            <div v-if="record.status === '可用'" class="table__status">可用</div>
            <div v-else-if="record.status === '禁用'" class="table__status error">禁用</div>
          </template>

          <template v-else>
            {{ replaceEmptyStr(record[column.dataIndex as string]) }}
          </template>
        </template>
      </a-table>
    </div>
    <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getIPListData()" />
  </div>
</template>

<script lang="ts" setup>
  import dayjs from 'dayjs'
  import { dateFormat } from 'g6-fn'
  import { ref } from 'vue'

  import useList from '@/hooks/use-list'
  import { callRecordsApi } from '@/services/api'
  import { replaceEmptyStr } from '@/utils'
  import { filterTableColumns } from '@/utils/ant-component'
  interface PageForm {
    algorithmId: string | number
    versionId: string | number
    appId: string | number
    callTimeStart: any
    callTimeEnd: any
    columns: 'total' | 'last' | ''
    order: 'desc' | 'asc'
  }
  const tableReset = ref<boolean>(true)

  // 表格
  const basicColumns = [
    {
      title: '调用IP',
      dataIndex: 'ip',
      minWidth: 200
    },
    {
      title: '算法服务名称',
      dataIndex: 'algorithmName',
      minWidth: 200
    },
    {
      title: '版本号',
      dataIndex: 'versionName',
      minWidth: 200
    },
    {
      title: '应用名称',
      dataIndex: 'appName',
      minWidth: 200
    },
    {
      title: '调用次数',
      dataIndex: 'total',
      isSort: true,
      width: 200
    },
    {
      title: '最后一次调用时间',
      dataIndex: 'last',
      isSort: true,
      width: 200
    }
  ]
  const tableColumns = ref(filterTableColumns(basicColumns))
  const FIFTH_DAY = 14 * 24 * 60 * 60 * 1000 // 15天的毫秒数

  const rangeValue = ref<any>([dayjs(Date.now() - FIFTH_DAY), dayjs(Date.now())])

  const reset = () => {
    rangeValue.value = [dayjs(Date.now() - FIFTH_DAY), dayjs(Date.now())]

    resetPageForm({
      versionId: '',
      algorithmId: '',
      appId: '',

      columns: '',
      callTimeStart: dateFormat(rangeValue.value[0], 'YYYY-MM-DD 00:00:00'),
      callTimeEnd: dateFormat(rangeValue.value[1], 'YYYY-MM-DD 23:59:59')
    })
  }
  const {
    pageForm,
    dataList: userList,
    getDataList: getIPListData,
    resetPageForm
  } = useList<PageForm, any>(callRecordsApi.list, {
    algorithmId: '',
    versionId: '',
    appId: '',
    callTimeStart: dateFormat(rangeValue.value[0], 'YYYY-MM-DD 00:00:00'),
    callTimeEnd: dateFormat(rangeValue.value[1], 'YYYY-MM-DD 23:59:59'),
    columns: '',
    order: 'desc'
  })
  const tableChange = (pagination: any, filters: any, sorter: any) => {
    pageForm.value.columns = sorter.field
    pageForm.value.order = sorter.order === 'ascend' ? 'asc' : 'desc'

    if (!sorter.order) {
      pageForm.value.columns = ''

      pageForm.value.order = 'asc'
    }
    getIPListData({ offset: 1 })
  }
  defineExpose({
    getIPListData,
    reset
  })
</script>

<style lang="less" scoped>
  .empty-bottom {
    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 1px; /* 下边框的高度 */
      background-color: @border1; /* 下边框的颜色 */
      content: '';
    }
  }

  .filter-area {
    display: flex;
    justify-content: space-between;
  }

  .tools-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .reset {
      margin: 0 8px;
      font-size: 14px;
      color: rgba(17, 22, 31, 0.52);
      cursor: pointer;
    }
  }
</style>
